<template>
  <div>
    <h3>产品列表</h3>
    <hr />
    <el-table :data="arr" type="expand">
      <el-table-column type="expand"> 价格： </el-table-column>
      <el-table-column label="商品名称" prop="productname"></el-table-column>
      <el-table-column label="所属分类" prop="producttype"></el-table-column>
      <el-table-column label="商品价格" prop="price"></el-table-column>
      <el-table-column label="商品图片">
        <img src="#" />
      </el-table-column>
      <el-table-column label="商品描述" prop="productinfo"></el-table-column>
      <el-table-column label="操作">
        <el-button type="primary" icon="el-icon-edit" circle></el-button>
        <el-button type="danger" icon="el-icon-delete" circle></el-button>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          productname: "1",
          producttype: "1",
          price: "1",
          courier: "1",
          img: "#",
          productinfo: "1",
        },
        {
          productname: "1",
          producttype: "1",
          price: "1",
          courier: "1",
          img: "#",
          productinfo: "1",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
h3 {
  padding: 20px;
}
table {
  margin-top: 50px;
}
</style>